// 首页
import React, { useEffect, useState } from 'react';
import { oder, OverallComplaint, teacher, user, visual } from '../../apis/user';
import { Row, Col, Statistic, Card } from 'antd'
import { AlertOutlined, BarChartOutlined, UserOutlined, TeamOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
type SearchProps = {}


export const Home = (props: SearchProps) => {
  // 定义本月订单总数量
  const [shopsNum, setShopsNum] = useState(0)
  // 定义本月投诉总数量
  const [usersNum, setUsersNum] = useState(0)
  // 定义技师数量
  const [teacherNum, setTeacherNum] = useState()
  // 定义用户数量
  const [userNum, setUserNum] = useState()
  // 定义上周点单数量
  const [WeekOrderAMeal, setWeekOrderAMealNum] = useState([])
  // 定义上周销售冠军
  const [Champion,setChampion] = useState([])
  // 定义上周销售冠军销售额
  const [ChampionSale,setChampionSale] = useState([])
  // 定义本月新增用户数量
  const [NumberOfUsers,setNumberOfUsers] = useState([])
  useEffect(() => {
    // 获取并计算对应数据
     Promise.all([oder(), OverallComplaint(), teacher(), user(), visual()]).then(result => {
         console.log(result)
         setShopsNum((result[0] as any).data.length)
         setUsersNum((result[1] as any).data[0].quantity)
         setTeacherNum((result[2] as any).data.length)
         setUserNum((result[3] as any).data.length);
         setWeekOrderAMealNum((result[4] as any).data[0].WeekOrderAMeal);
         setChampion((result[4] as any).data[0].Champion);
         setChampionSale((result[4] as any).data[0].ChampionSale);
         setNumberOfUsers((result[4] as any).data[0].NumberOfUsers);
     })
  }, [])
  // 上周点单数可视化
  useEffect( ()=> {
    var myLineChart = echarts.init(document.getElementById('lineCharts') as HTMLDivElement);
    const option = {
      title: {
        text:'上周点单数量',
        x:'center',
        y:'top',
      },
      tooltip: {},
      xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六',"周日"]
      },
      yAxis: {},
      series: [
        {
          name: '点单',
          type: 'line',
          data:WeekOrderAMeal
        }
      ]
    }
    myLineChart.setOption(option)
  }, [WeekOrderAMeal])
  // 上周销冠技师及其单人销售额
  useEffect(() => {
    var myBarChart = echarts.init(document.getElementById('barECharts') as HTMLDivElement);
    const option = {
      title: {
        text:'上周销冠技师及其单人销售额',
        x:'center',
        y:'top',
      },
      tooltip: {},
      xAxis: {
        data:Champion
      },
      yAxis: {},
      series: [
        {
          name: '销售额',
          type: 'bar',
          data: ChampionSale,
        }
      ]
    }
    myBarChart.setOption(option)
  }, [Champion,ChampionSale])
  // 本月新增用户数量
  useEffect( ()=> {
    var myLineChart = echarts.init(document.getElementById('NumberOfUsers') as HTMLDivElement);
    const option = {
      title: {
        text:'近15天新增用户数量',
        x:'center',
        y:'top',
      },
      tooltip: {},
      xAxis: {
        data: ["15天前","14天前","13天前","12天前","11天前","10天前","9天前","8天前","7天前","6天前","5天前","4天前","3天前","2天前","1天前"]
      },
      yAxis: {},
      series: [
        {
          name: '点单',
          type: 'line',
          data:NumberOfUsers
        }
      ]
    }
    myLineChart.setOption(option)
  }, [NumberOfUsers])
  return (
    <>
      <Row gutter={16}>
        <Col span={6}>
          <Card style={{backgroundColor: '#efefef'}}>
            <Statistic title="本月订单总数量：" value={shopsNum} prefix={<BarChartOutlined />} />
          </Card>
        </Col>
        <Col span={6}>
          <Card style={{backgroundColor: '#efefef'}}>
            <Statistic title="本月投诉总数量：" value={usersNum} prefix={<AlertOutlined />} />
          </Card>
        </Col>
        <Col span={6}>
          <Card style={{backgroundColor: '#efefef'}}>
            <Statistic title="目前技师数量:" value={teacherNum} prefix={<UserOutlined />} />
          </Card>
        </Col>
        <Col span={6}>
          <Card style={{backgroundColor: '#efefef'}}>
            <Statistic title="目前用户数量：" value={userNum} prefix={<TeamOutlined />} />
          </Card>
        </Col>
        <Col span={12} style={{paddingTop:25}}>
          <div id="lineCharts" style={{ width: "100%", height: 300, backgroundColor: '#efefef', paddingTop:14}}></div>
        </Col>
        <Col span={12} style={{paddingTop:25}}>
          <div id="barECharts" style={{ width: "100%", height: 300, backgroundColor: '#efefef', paddingTop:14}}></div>
        </Col>
        <Col span={24} style={{paddingTop:25}}>
          <div id="NumberOfUsers" style={{ width: "100%", height: 300, backgroundColor: '#efefef', paddingTop:14}}></div>
        </Col>
      </Row>

    </>
  )
}

